<!--代码逻辑和样式库-->
<script src="./statistic-report.component.js"></script>
<style src="./statistic-report.scss" scoped lang="scss"></style>

<template>
  <div>
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-form label-position="top" :inline="true">
        <el-row>
          <el-col :span="24" class="aq-vertical-middle">
            <el-button v-waves type="primary" @click="changeReport('2')">年报表</el-button>
            <el-button v-waves type="success" class="aq-margin-left-8" @click="changeReport('1')">月报表</el-button>
            <el-button v-waves type="warning" class="aq-margin-left-8" @click="changeReport('0')">日报表</el-button>
            <div class="aq-margin-left-8 aq-text-size-small">当前统计时间:<span class="aq-padding-left-4 text-red aq-text-size-medium">{{ reportTime }}</span></div>
          </el-col>
          <el-col :span="24" class="aq-margin-top-20 aq-vertical-middle">
            <el-select v-model="searchCriteria.cityCode" placeholder="请选择所属区域" clearable class="keyword">
              <el-option v-for="item in areaList" :key="item.cityCode" :label="item.regName" :value="item.cityCode">
              </el-option>
            </el-select>
            <el-select v-model="searchCriteria.enumAlarmType" placeholder="请选择报警类型" clearable class="aq-margin-left-4">
              <el-option v-for="item in alertType" :key="item.itemValue" :label="item.itemName" :value="item.itemValue">
              </el-option>
            </el-select>
            <el-select v-model="searchCriteria.transportId" placeholder="请选择运输单位" clearable class="aq-margin-left-8">
              <el-option v-for="item in companies" :key="item.id" :label="item.text" :value="'' + item.id">
              </el-option>
            </el-select>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="primary" icon="el-icon-search" class="aq-margin-left-8" @click="search()">
              查询
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Query') !== -1" type="warning" icon="el-icon-refresh" @click="reset()">
              重置
            </el-button>
            <el-button v-waves v-if="codesCheck.indexOf('Create') !== -1" type="success" icon="el-icon-edit" class="aq-margin-left-8" @click="exportData">
              导出
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <div class="aq-vertical-middle aq-margin-top-12">
        <div class="aq-margin-right-12"><span class="aq-text-size-small">运输单位:</span><span class="text-red aq-text-size-medium">{{ data.compName }}</span></div>
        <div class="aq-margin-right-12"><span class="aq-text-size-small">当前日期总报警次数:</span><span class="text-red aq-text-size-medium">{{ data.totalCountCount }}</span></div>
        <div class="aq-margin-right-12"><span class="aq-text-size-small">总排放报警次数:</span><span class="text-red aq-text-size-medium">{{ data.isWarningDisCount }}</span></div>
        <div class="aq-margin-right-12"><span class="aq-text-size-small">总设备断电报警:</span><span class="text-red aq-text-size-medium">{{ data.isPowerFailCount }}</span></div>
        <div class="aq-margin-right-12"><span class="aq-text-size-small">油罐气密性报警:</span><span class="text-red aq-text-size-medium">{{ data.isaAirtightnessCount }}</span></div>
        <div class="aq-margin-right-12"><span class="aq-text-size-small">油气超压报警:</span><span class="text-red aq-text-size-medium">{{ data.isOverPreCount }}</span></div>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="content-container aq-margin-top-16">
      <!--用户角色table-->
      <el-table :data="data.alarmInfoModelList" border fit highlight-current-row>
        <el-table-column align="center" width="70" label="排序" fixed>
          <template slot-scope="scope">
            <span>{{ (scope.$index + 1)+ (pageNum -1 )*recordNum }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="equipNo.dtuNo" label="Serial No." width="150px" />
        <!--<el-table-column prop="createTime" label="设备名称" width="155" />-->
        <!--<el-table-column prop="transportStatus" label="运输状态" width="120" />-->
        <el-table-column prop="createTime" label="报警时间" width="155" />
        <el-table-column prop="vehicleName" label="车辆名称" width="120" />
        <el-table-column prop="licensePlate" label="车牌号码" width="120">
          <template slot-scope="scope">
            <el-link type="primary" @click="showCarDetailDialog(scope.row)">{{ scope.row.licensePlate }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="position" label="车辆位置" width="120" />
        <el-table-column label="压力数据" width="155">
          <template slot-scope="scope">
            <div v-if="scope.row.equipNo.pressure.pa01 != '0'">1#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa01 }} Pa</span></div>
            <div v-if="scope.row.equipNo.pressure.pa02 != '0'">2#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa02 }} Pa</span></div>
            <div v-if="scope.row.equipNo.pressure.pa03 != '0'">3#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa03 }} Pa</span></div>
            <!--<div>1#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa01 }} Pa</span></div>
            <div>2#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa02 }} Pa</span></div>
            <div>3#油气压力 <span class="value-text aq-margin-left-8">{{ scope.row.equipNo.pressure.pa03 }} Pa</span></div>-->
          </template>
        </el-table-column>
        <el-table-column prop="equipNo.disCount" label="排放次数" />
        <el-table-column prop="equipNo.disTimeAll" label="排放累计时长" width="155" />
        <el-table-column label="人孔盖状态">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isEntrance?'打开':'关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="泄压阀状态">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isPreValve?'打开':'关闭' }}
          </template>
        </el-table-column>
        <el-table-column label="排放报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isWarningDis?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column label="设备断电报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isPowerFail?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column label="油罐气密性报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isAirtightness?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column label="油气超压报警">
          <template slot-scope="scope">
            {{ scope.row.equipNo.isOverFail?'报警':'无报警' }}
          </template>
        </el-table-column>
        <el-table-column prop="remove" label="解除状态" />
        <el-table-column prop="loadingCapacity" label="载重量" />
        <el-table-column prop="medium" label="介质类型" />
        <el-table-column prop="compName" label="运输单位" width="120" />
        <el-table-column prop="contact" label="联系人" />
        <el-table-column prop="phone" label="联系方式" />
      </el-table>
      <!-- 分页插件 -->
      <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>
    <!-- 显示车辆详情 -->
    <car-detail v-if="showSelectCarDetailDialog" :show-dialog.sync="showSelectCarDetailDialog"></car-detail>
  </div>
</template>
